<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品详情页</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
            max-width: 800px;
            margin: 0 auto;
        }
        .tab {
            padding: 10px 20px;
            background: #f1f1f1;
            display: inline-block;
            margin-right: 5px;
			/**
			 * 光标指针
			 *	在CSS中，cursor: pointer;属性
			 *	用于设置当鼠标悬停在元素上时显示的光标类型。
			 *	通常，这个属性值会将光标变为手形状，表示该元素是可点击的
			 */
            cursor: pointer;
        }
        .active {
            background: #4CAF50;
            color: white;
        }
		/**
		 * 通过将 display 属性设置为 none 可以隐藏元素。 
		 该元素将被隐藏，并且页面将显示为好像该元素不在其中
		 */
        .content {
			/**
			 * 不设置高度
			 * 关于宽度问题：
			 * 默认宽度就是父容器的100%宽度（自动撑满可用空间）
			 * 在之前的代码中，父容器是 body，设置了 max-width: 800px		 
			 * 所以 .content 的实际宽度会是：	 
			 * 屏幕宽度 ≤ 800px 时：和屏幕同宽（左右不留白） 
			 * 屏幕宽度 > 800px 时：保持800px宽（两侧自动留白） 
			 * 为什么不设置固定宽度？ 
			 * 为了响应式设计（自动适应不同屏幕尺寸） 
			 * 如果设固定宽度（比如 width: 500px），在小屏手机上会显示不全 
			 * 关于高度问题：
			 * 高度完全由内容自动撑开
			 * 有多少文字/元素，就显示多高
			 * 比如商品详情内容多就更长，规格参数内容少就更短
			 * margin-top: -1px 的作用：
			 * 这是为了消除上方标签按钮和内容区域之间的双边框（1px重叠）
			 * 视觉效果上让标签和内容区域看起来更紧密连接
			 */
            display: none;
            padding: 20px;
            border: 1px solid #ddd;
            margin-top: -1px;
        }
       .show {
			/*
			 * 上面content将display设置为隐藏那么当选中当前元素之时将他放开。
			 * 即：display: block;
			 */
            display: block;
        }
    </style>
</head>
<body>
    <h1>国情灵616运动鞋</h1>
    <p>¥299</p>
    
	<!-- style="width:100%;max-width:600px;"的意思： -->
	<!-- 1. width:100%; 的意思是:"让这张图片的宽度撑满它所在的容器"
	   比如如果图片放在一个800px宽的盒子里，图片就会变成800px宽
	   如果放在手机屏幕上（假设375px宽），图片就会变成375px宽 -->
	<!-- 2. max-width:600px; 的意思是：
    "但是最大不能超过600px宽"
    即使容器有800px宽，图片也只显示600px宽（不会继续放大） 
	在小屏幕（比如手机375px宽）时，仍然按375px显示（因为375px < 600px）-->
    <!-- 3. 两个合在一起的效果：
    在小于600px宽的屏幕上：图片会100%填满屏幕宽度
	在大于600px宽的屏幕上：图片会保持600px宽（不会无限放大） -->
    <img src="../images/xiezi.jpg" style="width:100%;max-width:600px;">
    
    <div>
		<!-- 起初第一个默认有active -->
        <div class="tab active" onclick="showTab(0)">商品详情</div>
        <div class="tab" onclick="showTab(1)">商品评价</div>
        <div class="tab" onclick="showTab(2)">规格参数</div>
    </div>
    
	<!-- 起初第一个默认有show -->
    <div id="content0" class="content show">
        <h2>商品详情</h2>
        <p>透气网布鞋面，高弹性EVA中底，耐磨橡胶大底，适合日常运动和休闲穿着。</p>
    </div>
    
    <div id="content1" class="content">
        <h2>商品评价</h2>
        <p>"非常舒适，透气性好！" - 张三</p>
        <p>"尺码标准，性价比高" - 李四</p>
    </div>
    
    <div id="content2" class="content">
        <h2>规格参数</h2>
        <p>材质：网布+橡胶</p>
        <p>尺码：36-44</p>
        <p>颜色：黑/白/蓝</p>
    </div>

    <script>
        function showTab(index) {
			/**
			 * 思路：
			 * 先把所有按钮变成"未选中"状态（灰色）
			 * 把所有内容区域隐藏起来
			 * 然后把点击的按钮变成"选中"状态（绿色）
			 * 最后显示对应的内容区域
			 */
			
            // 移除所有tab和content的active类
            let tabs = document.getElementsByClassName('tab');
            for(let i = 0; i < tabs.length; i++) {
				/**
				 * classList 属性返回元素的类名，作为 DOMTokenList 对象。
				 * classList 属性是只读的，但你可以使用 add() 和 remove() 方法修改它。
				 * tabs[i].classList：得到当前元素的类名
				 */
                tabs[i].classList.remove('active');
            }
			
            // 移除所有tab和content的show类
            let contents = document.getElementsByClassName('content');
            for(let i = 0; i < contents.length; i++) {
                contents[i].classList.remove('show');
            }
            
            // 添加active/show类到当前tab和content
            tabs[index].classList.add('active');
            document.getElementById('content' + index).classList.add('show');
        }
    </script>
</body>
</html>